<template>
  <Tabs value="name1">
    <Tab-pane label="照片墙" name="name3">
      <template>
        <div class="demo-upload-list" v-for="item in uploadList">
          <template v-if="item.status === 'finished'">
            <img :src="item.url">
            <div class="demo-upload-list-cover">
              <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
              <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
            </div>
          </template>
          <template v-else>
            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
          </template>
        </div>
        <Upload
          ref="upload"
          :show-upload-list="false"
          :default-file-list="defaultList"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :max-size="2048"
          :on-format-error="handleFormatError"
          :on-exceeded-size="handleMaxSize"
          :before-upload="handleBeforeUpload"
          multiple
          type="drag"
          action="//jsonplaceholder.typicode.com/posts/"
          style="display: inline-block;width:58px;">
          <div style="width: 58px;height:58px;line-height: 58px;">
            <Icon type="camera" size="20"></Icon>
          </div>
        </Upload>
        <Modal title="查看图片" v-model="visible">
          <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
        </Modal>
      </template>
    </Tab-pane>

    <Tab-pane label="二维码" name="name2">
      <div id="sq_section" class="panel-body">
        <div class="row" style="text-align: center">
          <img src="http://pan.baidu.com/share/qrcode?w=300&h=300&url=http://basic.wukangfit.com/wechat-coach/html/login.html?selected_store_id=1" alt="">
          <p>进入门店地址（会员入口）: http://basic.wukangfit.com/wechat-coach/html/login.html?selected_store_id=1</p>
        </div>
        <hr>
        <div class="row" style="text-align: center">
          <img src="http://pan.baidu.com/share/qrcode?w=300&h=300&url=http://store.wukangfit.com/wechat/login" alt="">
          <p>进入门店地址（员工入口）: http://store.wukangfit.com/wechat/login</p>
        </div>
        <hr>
        <div class="row" style="text-align: center">
          <a href="http://pan.baidu.com/share/qrcode?w=300&h=300&url=http://basic.wukangfit.com/scan-add-past-gym?store_id=1">
            <img src="http://pan.baidu.com/share/qrcode?w=300&h=300&url=http://basic.wukangfit.com/scan-add-past-gym?store_id=1" alt="">
          </a>
          <p>扫码签到地址：http://basic.wukangfit.com/scan-add-past-gym?store_id=1</p>
        </div>
      </div>
    </Tab-pane>

    <Tab-pane label="基本信息" name="name1">
      <template>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">

          <Form-item label="商户名称" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入商户名称"></Input>
          </Form-item>

          <Form-item label="商户联系人" prop="contacts">
            <Input v-model="formValidate.contacts" placeholder="请输入商户联系人名称"></Input>
          </Form-item>

          <Form-item label="联系人手机" prop="phone">
            <Input v-model="formValidate.phone" placeholder="联系人手机"></Input>
          </Form-item>

          <Form-item label="城市" prop="city" placeholder="请选择所在城市">
            <cascader
              size="large"
              :data="options"
              v-model="formValidate.city"
              @on-change="handleChange"
            >
            </cascader>
          </Form-item>

          <Form-item label="详细地址" prop="desc">
            <Input v-model="formValidate.desc" placeholder="详细地址" ></Input>
          </Form-item>

          <Form-item label="地图">
            <baidu-map class="map-container">
              <bm-view class="bm-view">
              </bm-view>
              <bm-local-search :keyword="formValidate.desc" :auto-viewport="true" :resultPanel="false" :location="location"></bm-local-search>
            </baidu-map>
          </Form-item>

          <Form-item>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </Form-item>
        </Form>
      </template>
    </Tab-pane>

  </Tabs>
</template>
<script>
import { regionData } from 'element-china-area-data'
import { RuleArray } from '../../rule/rule'
export default {
  data () {
    return {
      location: '中国',
      keyword: '',
      options: regionData,
      selectedOptions: [],
      formValidate: {
        city: [],
        name: '',
        contacts: '',
        tel: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      ruleValidate: RuleArray,
      defaultList: [
        {
          'name': 'a42bdcc1178e62b4694c830f028db5c0',
          'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
        },
        {
          'name': 'bc7521e033abdd1e92222d733590f104',
          'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
        }
      ],
      imgName: '',
      visible: false,
      uploadList: []
    }
  },
  methods: {
    handleChange (value) {
      console.log(value)
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功!')
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    handleView (name) {
      this.imgName = name
      this.visible = true
    },
    handleRemove (file) {
      // 从 upload 实例删除数据
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (res, file) {
      // 因为上传过程为实例，这里模拟添加 url
      file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar'
      file.name = '7eb99afb9d5f317c912f08b5212fd69a'
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 5
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 5 张图片。'
        })
      }
      return check
    }
  },
  mounted () {
    this.uploadList = this.$refs.upload.fileList
  }
}
</script>
<style scoped>
.map-container .bm-view {
  width: 100%;
  height: 400px
}
.demo-upload-list{
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.2);
  margin-right: 4px;
}
.demo-upload-list img{
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover{
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
  display: block;
}
.demo-upload-list-cover i{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
